<template>
  <div class="feedback-section">
    <div class="section-header">
      <h2 class="section-title">反馈建议</h2>
      <p class="section-desc">您的意见是我们改进的动力，感谢您的宝贵建议</p>
    </div>

    <!-- 反馈类型选择 -->
    <div class="feedback-types">
      <h3 class="types-title">反馈类型</h3>
      <a-row :gutter="16">
        <a-col :span="8" v-for="type in feedbackTypes" :key="type.key">
          <div 
            class="type-card" 
            :class="{ active: selectedType === type.key }"
            @click="selectType(type.key)"
          >
            <div class="type-icon">
              <component :is="type.icon" />
            </div>
            <div class="type-info">
              <h4 class="type-name">{{ type.name }}</h4>
              <p class="type-desc">{{ type.description }}</p>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 反馈表单 -->
    <div class="feedback-form-card">
      <h3 class="form-title">详细反馈</h3>
      <a-form
        :model="feedbackForm"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        @finish="submitFeedback"
      >
        <a-form-item 
          label="反馈标题" 
          name="title"
          :rules="[{ required: true, message: '请输入反馈标题' }]"
        >
          <a-input 
            v-model:value="feedbackForm.title" 
            placeholder="请简要描述您的问题或建议"
            :maxlength="50"
            show-count
          />
        </a-form-item>
        
        <a-form-item 
          label="详细描述" 
          name="description"
          :rules="[{ required: true, message: '请详细描述您的反馈内容' }]"
        >
          <a-textarea 
            v-model:value="feedbackForm.description" 
            placeholder="请详细描述您遇到的问题或改进建议，包括操作步骤、期望结果等"
            :rows="6"
            :maxlength="500"
            show-count
          />
        </a-form-item>
        
        <a-form-item label="联系方式" name="contact">
          <a-input 
            v-model:value="feedbackForm.contact" 
            placeholder="请留下您的联系方式，方便我们跟进处理（可选）"
          />
        </a-form-item>
        
        <a-form-item label="截图上传" name="screenshots">
          <a-upload
            v-model:file-list="feedbackForm.screenshots"
            name="screenshots"
            list-type="picture-card"
            :before-upload="beforeUpload"
            @preview="previewImage"
            @remove="removeImage"
          >
            <div v-if="feedbackForm.screenshots.length < 3">
              <PlusOutlined />
              <div class="upload-text">上传截图</div>
            </div>
          </a-upload>
          <p class="upload-tips">支持 JPG、PNG 格式，最多上传 3 张图片</p>
        </a-form-item>
        
        <a-form-item label="紧急程度" name="priority">
          <a-radio-group v-model:value="feedbackForm.priority">
            <a-radio value="low">一般</a-radio>
            <a-radio value="medium">重要</a-radio>
            <a-radio value="high">紧急</a-radio>
          </a-radio-group>
        </a-form-item>
        
        <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
          <a-space>
            <a-button type="primary" html-type="submit" :loading="submitting">
              <SendOutlined />
              提交反馈
            </a-button>
            <a-button @click="resetForm">
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <!-- 我的反馈记录 -->
    <div class="feedback-history">
      <h3 class="history-title">我的反馈记录</h3>
      <div class="history-list">
        <div 
          v-for="record in feedbackHistory" 
          :key="record.id"
          class="history-item"
        >
          <div class="history-header">
            <div class="history-info">
              <h4 class="history-title-text">{{ record.title }}</h4>
              <div class="history-meta">
                <a-tag :color="getTypeColor(record.type)">{{ getTypeName(record.type) }}</a-tag>
                <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
                <span class="history-time">{{ record.createTime }}</span>
              </div>
            </div>
            <div class="history-actions">
              <a-button type="link" @click="viewFeedback(record.id)">
                查看详情
              </a-button>
            </div>
          </div>
          <p class="history-desc">{{ record.description }}</p>
          <div v-if="record.reply" class="history-reply">
            <div class="reply-header">
              <UserOutlined />
              <span>官方回复</span>
              <span class="reply-time">{{ record.replyTime }}</span>
            </div>
            <p class="reply-content">{{ record.reply }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片预览模态框 -->
    <a-modal
      v-model:open="previewVisible"
      title="图片预览"
      :footer="null"
      width="600px"
    >
      <img :src="previewImage" style="width: 100%" />
    </a-modal>

    <!-- 反馈详情模态框 -->
    <a-modal
      v-model:open="detailVisible"
      title="反馈详情"
      width="700px"
      :footer="null"
    >
      <div v-if="currentFeedback" class="feedback-detail">
        <div class="detail-header">
          <h3>{{ currentFeedback.title }}</h3>
          <div class="detail-meta">
            <a-tag :color="getTypeColor(currentFeedback.type)">{{ getTypeName(currentFeedback.type) }}</a-tag>
            <a-tag :color="getStatusColor(currentFeedback.status)">{{ getStatusText(currentFeedback.status) }}</a-tag>
            <span>提交时间：{{ currentFeedback.createTime }}</span>
          </div>
        </div>
        
        <div class="detail-content">
          <h4>问题描述：</h4>
          <p>{{ currentFeedback.description }}</p>
          
          <div v-if="currentFeedback.screenshots?.length" class="detail-screenshots">
            <h4>相关截图：</h4>
            <div class="screenshot-list">
              <img 
                v-for="(img, index) in currentFeedback.screenshots" 
                :key="index"
                :src="img.url" 
                @click="previewImage = img.url; previewVisible = true"
                class="screenshot-thumb"
              />
            </div>
          </div>
          
          <div v-if="currentFeedback.reply" class="detail-reply">
            <h4>官方回复：</h4>
            <div class="reply-box">
              <p>{{ currentFeedback.reply }}</p>
              <div class="reply-footer">
                <span>回复时间：{{ currentFeedback.replyTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import {
  BugOutlined,
  BulbOutlined,
  ToolOutlined,
  PlusOutlined,
  SendOutlined,
  UserOutlined
} from '@ant-design/icons-vue'

// 反馈类型
const feedbackTypes = ref([
  {
    key: 'bug',
    name: '问题反馈',
    description: '功能异常、错误等',
    icon: BugOutlined
  },
  {
    key: 'suggestion',
    name: '功能建议',
    description: '新功能、改进建议',
    icon: BulbOutlined
  },
  {
    key: 'other',
    name: '其他反馈',
    description: '使用体验、其他问题',
    icon: ToolOutlined
  }
])

// 选中的反馈类型
const selectedType = ref('bug')

// 反馈表单
const feedbackForm = reactive({
  title: '',
  description: '',
  contact: '',
  screenshots: [],
  priority: 'medium'
})

// 提交状态
const submitting = ref(false)

// 图片预览
const previewVisible = ref(false)
const previewImage = ref('')

// 反馈详情
const detailVisible = ref(false)
const currentFeedback = ref(null)

// 反馈历史记录
const feedbackHistory = ref([
  {
    id: 1,
    type: 'bug',
    title: '登录页面加载缓慢',
    description: '在使用Chrome浏览器登录时，页面加载时间超过10秒...',
    status: 'resolved',
    createTime: '2024-01-15 14:30',
    reply: '感谢您的反馈，我们已经优化了登录页面的加载速度，问题已解决。',
    replyTime: '2024-01-16 09:15'
  },
  {
    id: 2,
    type: 'suggestion',
    title: '希望增加夜间模式',
    description: '建议增加夜间模式功能，方便晚上学习时使用...',
    status: 'processing',
    createTime: '2024-01-10 20:45',
    reply: null,
    replyTime: null
  }
])

// 选择反馈类型
const selectType = (type: string) => {
  selectedType.value = type
}

// 上传前验证
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    message.error('只能上传图片文件!')
    return false
  }
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    message.error('图片大小不能超过 5MB!')
    return false
  }
  return false // 阻止自动上传
}

// 预览图片
const handlePreview = (file: any) => {
  previewImage.value = file.url || file.thumbUrl
  previewVisible.value = true
}

// 移除图片
const removeImage = (file: any) => {
  const index = feedbackForm.screenshots.findIndex(item => item.uid === file.uid)
  if (index > -1) {
    feedbackForm.screenshots.splice(index, 1)
  }
}

// 提交反馈
const submitFeedback = async () => {
  submitting.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 添加到历史记录
    const newFeedback = {
      id: Date.now(),
      type: selectedType.value,
      title: feedbackForm.title,
      description: feedbackForm.description,
      status: 'pending',
      createTime: new Date().toLocaleString('zh-CN'),
      reply: null,
      replyTime: null
    }
    
    feedbackHistory.value.unshift(newFeedback)
    message.success('反馈提交成功！我们会尽快处理您的反馈')
    resetForm()
  } catch (error) {
    message.error('提交失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  Object.assign(feedbackForm, {
    title: '',
    description: '',
    contact: '',
    screenshots: [],
    priority: 'medium'
  })
}

// 查看反馈详情
const viewFeedback = (id: number) => {
  currentFeedback.value = feedbackHistory.value.find(item => item.id === id)
  detailVisible.value = true
}

// 获取类型颜色
const getTypeColor = (type: string) => {
  const colors = {
    bug: 'red',
    suggestion: 'blue',
    other: 'green'
  }
  return colors[type as keyof typeof colors] || 'default'
}

// 获取类型名称
const getTypeName = (type: string) => {
  const names = {
    bug: '问题反馈',
    suggestion: '功能建议',
    other: '其他反馈'
  }
  return names[type as keyof typeof names] || '未知'
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colors = {
    pending: 'orange',
    processing: 'blue',
    resolved: 'green',
    rejected: 'red'
  }
  return colors[status as keyof typeof colors] || 'default'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const texts = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决',
    rejected: '已拒绝'
  }
  return texts[status as keyof typeof texts] || '未知'
}
</script>

<style scoped>
.feedback-section {
  max-width: 900px;
}

.section-header {
  margin-bottom: 24px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.section-desc {
  color: #666;
  margin: 0;
}

.feedback-types {
  margin-bottom: 32px;
}

.types-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.type-card {
  background: white;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.type-card:hover {
  border-color: #20a1da;
}

.type-card.active {
  border-color: #20a1da;
  background: #f0f8ff;
}

.type-icon {
  font-size: 24px;
  color: #20a1da;
  margin-bottom: 12px;
}

.type-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.type-desc {
  color: #666;
  margin: 0;
}

.feedback-form-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}

.form-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.upload-text {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

.upload-tips {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
  margin-bottom: 0;
}

.feedback-history {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 24px;
}

.history-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.history-item {
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.history-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.history-title-text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-time {
  color: #999;
  font-size: 14px;
}

.history-desc {
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.history-reply {
  background: #f8f9fa;
  border-left: 3px solid #20a1da;
  padding: 12px 16px;
  border-radius: 4px;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.reply-time {
  color: #999;
  font-weight: normal;
  font-size: 14px;
  margin-left: auto;
}

.reply-content {
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.feedback-detail {
  max-height: 500px;
  overflow-y: auto;
}

.detail-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 16px 0 8px 0;
}

.detail-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.screenshot-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.screenshot-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.detail-reply {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.reply-box p {
  margin-bottom: 12px;
}

.reply-footer {
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .history-header {
    flex-direction: column;
    gap: 8px;
  }
  
  .history-actions {
    align-self: flex-start;
  }
  
  .detail-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  :deep(.ant-col) {
    width: 100% !important;
    margin-bottom: 16px;
  }
}
</style>
